<template>
	<view class="bg-white pl-20 pr-20">
		<uv-divider style="margin-top: 0;"></uv-divider>
		<view class="flex justify-between align-center">
			<uv-input placeholder="请输入关键字" size="mini" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399;" shape="circle" font-size="12px"
				@blur="blurFn"></uv-input>
			<view class="pl-20">
				搜索
			</view>
		</view>
		<uv-divider></uv-divider>
		<view class="">
			<view class="flex justify-between align-center">
				<text class="h5 text-dark font-weight-bold">搜索历史</text>
				<text @click="Clear">清空</text>
			</view>
			<view class="parent-container">
				<view class="search_index text-dark" v-for="item in historyList" :key="item" @click="blurFn(item)">
					{{item}}
				</view>
			</view>
			<uv-divider></uv-divider>

		</view>
		<view class="">
			<text class="h5 font-weight-bold" style="color: #efa017;">热门搜索</text>
			<view class="mt-10">
				<uv-row style="flex-wrap: wrap;">
					<uv-col span="6" v-for="(item,index) in hotList" :key="item" @click="blurFn(item)">
						<view class="flex align-center search_item mb-20 mt-20">
							<text v-if="!index" class="search_index mr-10 text-danger">
								{{index+1}}
							</text>
							<text v-else-if="index==1" class="search_index mr-10 text-warning">
								{{index+1}}
							</text>
							<text v-else-if="index==2" class="search_index mr-10 text-hover-warning">
								{{index+1}}
							</text>
							<text v-else class="search_index mr-10">
								{{index+1}}
							</text>
							<text class="text-dark ">
								{{item}}
							</text>
						</view>
					</uv-col>

				</uv-row>

			</view>
		</view>



	</view>
</template>

<script>
	import $S from '@/common/lib/storage.js';
	export default {
		components: {

		},
		data() {
			return {
				hotList: ["宝宝", '孕期', '生活用品', '冲奶粉', '洗澡', '婴儿车', '疫苗', '洗澡', '用药', '饮食'],
				historyList: []
			}
		},
		methods: {
			blurFn(value) {
				// 判断 value 是否已经存在于 historyList 中
				const index = this.historyList.indexOf(value);
				if (index !== -1) {
					// 如果存在，移除已有的值
					this.historyList.splice(index, 1);
				}
				// 将当前值添加到数组的开头
				this.historyList.unshift(value);

				// 更新本地存储
				$S.setStorage('historySearch', JSON.stringify(this.historyList));
				this.searchFn(value)
			},
			Clear() {
				this.historyList = []
				$S.removeStorage('historySearch');
			},
			searchFn(value) {
				uni.navigateTo({
					url: `/pages/search/seResult?conditions=${value}`,
				})
			}
		},
		onLoad() {
			let str = $S.getStorage('historySearch');
			str && (this.historyList = JSON.parse(str))
		},

	}
</script>

<style scoped lang="less">
	.uv-input--radius,
	.uv-input--square {
		border-radius: 20px;
		// width: 70%;
		height: 34px;
	}

	.search_index {
		display: inline-block;
		/* 根据内容撑开 */
		background-color: #f7f7f7;
		border-radius: 20px;
		padding: 4px 8px;
		/* 可选：添加一些内边距 */

		/* 文本溢出处理 */
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 溢出隐藏 */
		text-overflow: ellipsis;
		/* 显示省略号 */

		/* 确保盒子能够根据内容自适应宽度 */
		max-width: 100%;
		/* 最大宽度不超过父元素 */
	}

	/* 父容器样式 */
	.parent-container {
		display: flex;
		flex-wrap: wrap;
		/* 允许子元素换行 */
		gap: 8px;
		/* 可选：设置子元素之间的间距 */
	}

	.search_item {
		width: 100%;
		/* 确保占据整个列宽 */
		word-break: break-all;
		/* 允许长单词或URL地址换行到下一行 */
	}
</style>